import {createRouter,createWebHashHistory} from"vue-router"

const Home = () => import('../views/Home.vue');
const About = () => import('../views/About.vue');
const Product = () => import('../views/use-center/Product.vue');


const UserCenter = () => import("../views/use-center/index.vue")
const UserProfile = () => import("../views/use-center/Profile.vue")
const UserSettings = () => import("../views/use-center/Settings.vue")
const NotFound = () => import("../views/404.vue")
const VuexPage =() =>import("../views/Vuex.vue")



const routes = [
    {
        path: '/home',
        name:'home',
        component:Home
    },
    {
        path:'/product/:id',
        name:'product',
        component:Product
    },
    {
        path: '/about',
        name:'about',
        component:About
    },
    {
        path:'/vuex',
        name:'vuePage',
        component:VuexPage
    },
    {
        path:"/user",
        name:"userCenter",
        component:UserCenter,
        redirect:'/user/profile',
        children:[
            {
                path:"profile",
                name:"profile",
                component:UserProfile
            },
            {
                path:"settings",
                name:"settings",
                component:UserSettings
            },
        ]
    },
    {
        path:'/:pathMatch(.*)*',
        name:'NotFound',
        component:NotFound
    }
]

console.log('routes',routes);
const router = createRouter({
    history : createWebHashHistory(),
    routes
})


router.beforeEach((to,from,next)=>{
    console.log('to',to);
    console.log('from',from);

    next()
})
router.afterEach((to,from)=>{
    console.log('后置守卫to',to);
    console.log('后置守卫from',from);
})

export default router